<script setup lang="ts">
import type { Deal } from "../scripts/Deal.interface";
import { onMounted, computed, ref } from "vue";
import { useRank } from "@/stores/rank";
import { commFun } from "@/views/ranks/script/comm";
import NavTitle from "../../component/NavTitle/index.vue";
import YexTent from "@/components/y-extent/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import JNumber from "@/components/j-number/index.vue";
import BankIcon from "../icon/shouye.svg";
import { useTokens } from "@/stores/tokens";
import { formatBigNumber, formatTimeAgo, formatTimestamp } from "@/comm/format";
import { get } from "@/comm/request";
import { URL_SIGNAL_BIG_AMOUNT } from "@/comm/api";
import { useCore } from "@/hooks/useCore";
import { sortList } from "@/comm/tooler";
import TimeTips from "@/components/timeTips/index.vue";
import { useLayout } from "@/stores/layout";
import router from "@/routers";
let layout = useLayout()

const tokens = useTokens();
const rank = useRank();
const core = useCore();

onMounted(() => {
    update();
});

const listArr = computed(() => {
    let ary = [...rank.REAL_TIME_BIG_TURNOVER];
    sortList(ary, "T");
    console.log(ary)
    return ary.slice(0, 5);
})
function loadErr(e: any) {
    e.target.src = "/coin.svg"
}
const update = () => {
    get(URL_SIGNAL_BIG_AMOUNT, {
        limit: 10
    }).then((res: any) => {
        let ary = res.data;
        rank.changeBIG_TURNOVER(ary);
        // setTimeout(update, 10000);
    });
};

const onCoin = (str: string) => {
    // window.open("/coin/" + str);
    core.switchCoinByName(str);
};
function goMore(){
    router.push('/bigVol')
}
</script>
<template>
    <div class="deal">
        <NavTitle class="title-right" :is-more="true" @more="goMore" :title="$t('message.Clever_Deal.title.b')" :icon="BankIcon"></NavTitle>
        <div class="bdy">
            <VRow class="c-title-5 c-clor had bord" no-gutters>
                <VCol class="col0" cols="4">{{ $t("message.Clever_Deal.c") }}</VCol>
                <VCol class="col1" cols="2">{{ $t("message.Clever_Deal.f") }}</VCol>
                <VCol class="col2" cols="1">{{ $t("message.Clever_Deal.g") }}</VCol>
                <VCol class="col3" cols="2">{{ $t("message.Clever_Deal.h") }}</VCol>
                <VCol class="col4" cols="1">{{ $t("message.Clever_Deal.e") }}</VCol>
                <VCol class="col5" cols="2">&nbsp;</VCol>
            </VRow>
            <div class="list c-title-4">
                <VRow class="bord" no-gutters v-for="item in listArr">
                    <VCol class="col0" cols="4">
                        <img class="icon seo-font" alt="chainingview" :src="tokens.getImg(item.s)"  @click="console.log(item)" @error="loadErr" />
                        <div class="name" @click="onCoin(item.s)">
                            <span>{{ commFun.getForm(true, item.s) }}</span>
                            <span style="color: var(--color)">/{{ commFun.getForm(false, item.s) }}</span>
                        </div>
                    </VCol>
                    <VCol class="col1 c-bold" cols="2">${{ item.p }}</VCol>
                    <VCol class="col2" cols="1">
                        <JNumber :num="item.r" is-color notbold suffix="%" origin></JNumber>
                        <!-- <div v-if="item.p > 0" class="">{{ item.P }}%</div>
                                                                                                                                                                                <div v-else class="">{{ item.P }}%</div> -->
                    </VCol>
                    <VCol class="col3 c-bold" cols="2">
                        {{ formatBigNumber(item.t) }}
                    </VCol>
                    <VCol class="col4" cols="1">
                        <TimeTips :text="formatTimestamp(Number(item.T))">{{ formatTimeAgo(item.T) }}</TimeTips>
                    </VCol>
                    <VCol class="col5" cols="2">
                        <YexTent :level="item.L" :dir="item.d == 'SHORT'"></YexTent>
                    </VCol>
                </VRow>
                <JEmpty v-if="listArr.length === 0"></JEmpty>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
.bdy {
    .list {
        .col0 {
            .name:hover {
                border-bottom: 1px solid;
            }

        }

        .v-col {
            height: 38px;
            display: flex;
            align-items: center;
        }

        .v-row:last-child {
            &:before {
                content: "";
                border-bottom: none !important;
            }
        }
    }
}
.title-right{
  padding-right: 20px;
}
.deal {
    .col0 {
        .icon {
            width: 20px;
            height: 20px;
            margin-right: 7px;
        }

        flex: 2;
    }

    .col2 {
        margin-right: 10px;
    }

    .col3 {
        padding-left: 20px !important;
        // background-color: rebeccapurple;
    }

    .col4 {
        width: 20px !important;
        flex: 0.5;
        text-align: right;
        justify-content: flex-end;
    }

    .col5 {
        flex: 1;
        justify-content: flex-end;
    }
}
</style>
